<template>
  <div class="queryr">
    <nav>
      <div class="box">
        <router-link to="/classification" style="color: #333">
          <van-icon name="arrow-left" class="icon icon-left" />
        </router-link>
        <span>悠享购</span>
        <router-link to="/shoppingcart" style="color: #333">
            <img src="https://mall.leyifan.com/static/h5/new_images/icon_card.png" alt="" />
        </router-link>
      </div>
    </nav>
    <div class="header">
      <div class="left">
        <span>请填写商品网址</span>
        <span>乐淘一番将在人工审核通过后为您购买~</span>
      </div>
      <div class="right">
        <img src="https://mall.leyifan.com/static/h5/new_images/register_bg.png" alt="" />
      </div>
    </div>
    <div class="inp">
      <input type="text" placeholder="请填写源站商品链接" />
    </div>
    <div class="btn">
      <button>查询商品链接</button>
    </div>
    <div class="card">
      <span>人工代购流程</span>
      <img
        src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/10/30/603ee77095e44662a9d2af3137360b61xttovltp3x.png"
        alt=""
      />
    </div>
    <!-- tab卡片 -->
    <van-tabs v-model:active="active" color="#ff3d58">
      <van-tab :title="item1.category" v-for="(item1, index) in queryrCard" :key="index">
        <div class="cardcontent-container">
        <div class="cardcontent" v-for="item2 in item1.storeOriginSiteInfos" :key="item2.id">
          <div class="iamg2">
            <img :src="item2.img" alt="" />
          </div>
           <div class="text">
              <span> {{ item2.description }}</span>
            </div>
        </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from '@/api/axios'
// tab卡片
const active = ref(0)

let queryrCard = ref(null)
let Cardcontent = ref(null)
// return { active };
axios
  .get(`/api/front/originSite/list`)
  .then((res) => {
    queryrCard.value = res.data.data
    Cardcontent.value = res.data.data.storeOriginSiteInfos

    // console.log('成功', queryrCard.value)
    // console.log('测试', Cardcontent.value)
  })
  .catch((error) => {
    console.error('失败', error)
  })
</script>

<style scoped lang="less">
.queryr {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  padding: 40rem 0;
  //   导航栏
  nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 8rem;
    .box {
      width: 100vw;
      height: 40rem;
      background-color: #fff;
      font-size: 18rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      img {
        width: 22rem;
        height: 22rem;
        position: absolute;
        top: 8rem;
        right: 14rem;
      }
      .icon-left {
        position: absolute;
        top: 12rem;
        left: 14rem;
        font-size: 18rem;
      }
      span {
        line-height: 40rem;
        font-size: 14rem;
        font-weight: bold;
      }
    }
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rem 24rem;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      span {
        font-size: 11rem;
        font-weight: 400;
        // margin-bottom: 10rem;
        line-height: 16rem;
      }
    }
    .right {
      img {
        width: 83rem;
        height: 70rem;
        display: block;
      }
    }
  }
  .inp {
    margin: 0;
    // padding: 0 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    input {
      width: 348rem;
      height: 48rem;
      text-align: center;
      font-size: 13rem;
      color: #999;
      border-radius: 8rem;
      padding: 0 34rem 0 10rem;
      background: none;
      outline: none;
      border: 1rem solid #ccc;
    }
  }
  .btn {
    padding: 20rem 14rem;
    button {
      width: 348rem;
      height: 43rem;
      background: #ff3d58;
      border: 0;
      line-height: 43rem;
      color: #fff;
      border-radius: 21rem;
      font-size: 15rem;
    }
  }
  .card {
    padding: 16rem 14rem;
    span {
      font-size: 15rem;
      font-weight: 500;
      margin-bottom: 14rem;
    }
    img {
      width: 348rem;
      height: 90rem;
      display: block;
    }
  }
  .cardcontent-container{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10rem; // 设置间距
    padding: 10rem;
  .cardcontent {
    display: flex;
    flex-direction: column; // 使内容垂直排列
    align-items: center; // 使内容水平居中对齐
    width: calc(25% - 8rem); // 每行四个，减去间距
    box-sizing: border-box;
    .iamg2 {
    width: 68rem;
      height: 68rem;
      background-color: #f5f5f5;
      border-radius: 10rem;
      padding: 0 10rem;
      img {
        width: 68rem;
        height: 68rem;
        display: block;
        object-fit: contain;
      }  
    }
      .text {
       text-align: center; // 文字居中对齐
    //   padding: 10rem 0;
      span{
        font-size: 10rem;
      }
      }
  }
  }
}
</style>